<!DOCTYPE html>
<html lang="en">
<head><title>Sample Markup</title></head>
<body>
<div class="form-group">
	<label class="control-label">Items selectable only</label>
	<div class="form-group">

		<ul class="tree" id="MyTree" role="tree" aria-activedescendant="" aria-label="My Tree" aria-multiselectable=false>
			<li class="tree-branch hidden" data-template="treebranch" role="treeitem" aria-expanded="false" aria-selected="false">
				<div class="tree-branch-header">
					<button type="button" class="tree-branch-name" tabindex="-1">
						<span class="glyphicon icon-caret glyphicon-play"></span>
						<span class="glyphicon icon-folder glyphicon-folder-close"></span>
						<span class="tree-label">Example Folder</span>
					</button>
				</div>
				<ul class="tree-branch-children" role="group"></ul>
				<div class="tree-loader"><span role="alert">Loading...</span></div>
			</li>
			<li class="tree-item hidden" data-template="treeitem" role="treeitem" aria-selected="false">
				<button type="button" class="tree-item-name" tabindex="-1">
					<span class="glyphicon icon-item fueluxicon-bullet"></span>
					<span class="tree-label">Example Item</span>
				</button>
			</li>
			<li class="tree-overflow hidden" data-template="treeoverflow" role="treeitem">
				<button type="button" class="tree-overflow-name" tabindex="-1">
					<span class="glyphicon"></span>
					<span class="tree-label"></span>
				</button>
			</li>
			<li class="tree-loader hidden"><span role="alert">Loading...</span></li>
		</ul>

		<ul class="tree" id="MyTree2" role="tree" aria-activedescendant="" aria-label="My Tree 2" aria-multiselectable=false>
			<li class="tree-branch hidden" data-template="treebranch" role="treeitem" aria-expanded="false" aria-selected="false">
				<div class="tree-branch-header">
					<button type="button" class="tree-branch-name" tabindex="-1">
						<span class="glyphicon icon-caret glyphicon-play"></span>
						<span class="glyphicon icon-folder glyphicon-folder-close"></span>
						<span class="tree-label">Example Folder</span>
					</button>
				</div>
				<ul class="tree-branch-children" role="group"></ul>
				<div class="tree-loader"><span role="alert">Loading...</span></div>
			</li>
			<li class="tree-item hidden" data-template="treeitem" role="treeitem" aria-selected="false">
				<button type="button" class="tree-item-name" tabindex="-1">
					<span class="glyphicon icon-item fueluxicon-bullet"></span>
					<span class="tree-label">Example Item</span>
				</button>
			</li>
			<li class="tree-overflow hidden" data-template="treeoverflow" role="treeitem">
				<button type="button" class="tree-overflow-name" tabindex="-1">
					<span class="glyphicon"></span>
					<span class="tree-label"></span>
				</button>
			</li>
			<li class="tree-loader hidden"><span role="alert">Loading...</span></li>
		</ul>

	</div>
</div>

<div class="form-group">
	<label class="control-label">Folders selectable</label>
	<div class="form-group">

		<ul id="MyTreeSelectableFolder" class="tree tree-folder-select" role="tree" aria-activedescendant="" aria-label="My Tree Selectable" aria-multiselectable=false>
			<li class="tree-branch hidden" data-template="treebranch" role="treeitem" aria-expanded="false" aria-selected="false">
				<div class="tree-branch-header">
					<button type="button" class="tree-branch-name" tabindex="-1">
						<span class="glyphicon icon-caret glyphicon-play"></span>
						<span class="glyphicon icon-folder glyphicon-folder-close"></span>
						<span class="tree-label">Example Folder</span>
					</button>
				</div>
				<ul class="tree-branch-children" role="group"></ul>
				<div class="tree-loader"><span role="alert">Loading...</span></div>
			</li>
			<li class="tree-item hidden" data-template="treeitem" role="treeitem" aria-selected="false">
				<button type="button" class="tree-item-name" tabindex="-1">
					<span class="glyphicon icon-item fueluxicon-bullet"></span>
					<span class="tree-label">Example Item</span>
				</button>
			</li>
			<li class="tree-overflow hidden" data-template="treeoverflow" role="treeitem">
				<button type="button" class="tree-overflow-name" tabindex="-1">
					<span class="glyphicon"></span>
					<span class="tree-label"></span>
				</button>
			</li>
			<li class="tree-loader hidden"><span role="alert">Loading...</span></li>
		</ul>

	</div>
</div>
</body>
</html>
